<template>
  <div class="style-page">
    <div class="head-page-title">{{ showComponentData.title }}</div>
    <div class="line"></div>

    <div class="component-style">
      <div class="header">
        <p class="title">内容样式</p>
      </div>
      <el-form :model="form" label-width="auto">
        <el-form-item label="内容排版">
          <el-radio-group v-model="showComponentData.layout">
            <el-radio :value="'list'">列表</el-radio>
            <el-radio :value="'grid-2'">一行两个</el-radio>
            <el-radio :value="'grid-3'">一行三个</el-radio>
            <el-radio :value="'grid-1'">卡片</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题名称">
          <el-radio-group v-model="showComponentData.show_item_name">
            <el-radio :value="0">不显示</el-radio>
            <el-radio :value="1">一行</el-radio>
            <el-radio :value="2">两行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题颜色">
          <el-color-picker v-model="form.titleColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.titleColor">
            <template #append>
              <el-button @click="form.titleColor = '#333333'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="文字粗细">
          <el-radio-group v-model="form.titleFontWeight">
            <el-radio label="正常" :value="0" />
            <el-radio label="加粗" :value="600" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题文字大小">
          <div class="flex">
            <el-slider style="width: 70%" v-model="form.titleFontSize" :min="12" :max="30" />
            <el-input type="number" style="width: 30%; margin-left: 20px" v-model.number="form.titleFontSize" :min="12"
              :max="30">
              <template #append>px</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="描述内容">
          <el-radio-group v-model="showComponentData.show_item_desc">
            <el-radio :value="0">不显示</el-radio>
            <el-radio :value="1">一行</el-radio>
            <el-radio :value="2">两行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述颜色">
          <el-color-picker v-model="form.descColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.descColor">
            <template #append>
              <el-button @click="form.descColor = '#333333'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="add-area">
      <p class="add-title">内容</p>
      <VueDraggable v-model="showComponentData.default_sub_list" :animation="150" ghostClass="ghost" class="content"
        @end="handleUpdateComponent">
        <div class="goods-item" v-for="(item, index) in showComponentData.default_sub_list" :key="item.id">
          <div class="left">
            <div class="avatar-uploader" @click="handleChangeImage(index)">
              <el-image v-if="item.image" :src="item.image" class="avatar" fit="cover"></el-image>
              <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
                  <Plus />
                </el-icon></i>
              <div v-if="item.image" class="mask">替换</div>
              <el-icon v-if="item.image" class="del-image" :size="20" @click.stop="handleDelImg(index)">
                <CircleCloseFilled />
              </el-icon>
            </div>
          </div>
          <div class="right">
            <p class="text" style="font-weight: bold">{{ item.name || '此处显示内容标题' }}</p>
            <p class="text remark-text" style="font-size: 12px; color: #999">{{
              item.remark || '此处显示内容描述'
            }}</p>
          </div>

          <el-icon class="del-icon" :size="16" color="red" @click="handleDel(index)">
            <CircleCloseFilled />
          </el-icon>
        </div>
        <el-tag type="primary" class="submit-btn" @click="handleAdd">添加内容</el-tag>
      </VueDraggable>
    </div>

    <div class="component-style">
      <common-style :content-data="showComponentData" @update-style="handleUpdateStyle"></common-style>
    </div>

    <article-choose-dialog v-if="showClassTypeDialog" :show-article-group-dialog="showClassTypeDialog"
      :default-selected-data="selectedData" @close-dialog="handleCloseClassDialog"></article-choose-dialog>

    <link-list-dialog v-if="showLinkDataDialog" :show-link-dialog="showLinkDataDialog"
      @close-dialog="showLinkDataDialog = false"></link-list-dialog>

    <image-selected-dialog v-if="showImageChooseDialog" :single-type="true" :operation-type="false"
      :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
import CommonStyle from '@/views/decoration/diyComponents/CommonStyleComponent/CommonStyle.vue'
import { VueDraggable } from 'vue-draggable-plus'
import { Plus, CircleCloseFilled } from '@element-plus/icons-vue'
import debounce from 'lodash/debounce'
import { reactive, ref, toRaw } from 'vue'
import ArticleChooseDialog from '@/views/decoration/diyComponents/ArticleChooseDialog.vue'
import LinkListDialog from '@/views/decoration/diyComponents/LinkListDialog.vue'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

const props = defineProps({
  contentData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['updateData'])

const showComponentData = ref(props.contentData)
const showClassTypeDialog = ref(false)
const showLinkDataDialog = ref(false)
const selectedData = ref()
const showImageChooseDialog = ref(false)
const changeIndex = ref()

interface FormData {
  titleFontSize: number
  titleColor: string
  titleFontWeight: number
  descColor: string
}

const form = reactive<FormData>({
  titleFontSize: 14,
  titleColor: '#333333',
  titleFontWeight: 600,
  descColor: '#666666'
})

watch(
  form,
  () => {
    emitFormUpdate()
  },
  { deep: true }
)

const emitFormUpdate = debounce(() => {
  const raw = toRaw(form)
  showComponentData.value.itemStyle = {
    title: {
      fontSize: raw.titleFontSize,
      color: raw.titleColor,
      fontWeight: raw.titleFontWeight
    },
    desc: {
      color: raw.descColor
    }
  }
  handleUpdateComponent()
}, 300)

// function handleSuccess(file: any, index: number) {
//   showComponentData.value.default_sub_list[index].image = file.data.url
//   handleUpdateComponent()
// }

function handleChangeImage(index: number) {
  changeIndex.value = index
  showImageChooseDialog.value = true
}

function handleCloseClassDialog(value: any) {
  if (value && Array.isArray(value)) {
    const newData = value.map((item: any) => {
      return {
        ...item,
        image: item.coverUrl,
        name: item.title,
        remark: item.subtitle,
        mobile: item.publisher
      }
    })

    showComponentData.value.default_sub_list = newData
  }
  showClassTypeDialog.value = false
}

function handleAdd() {
  showClassTypeDialog.value = true
}

function handleDel(index: number) {
  showComponentData.value.default_sub_list.splice(index, 1)
  if (showComponentData.value.default_sub_list.length === 0) {
    selectedData.value = {}

    showComponentData.value.default_sub_list.push({
      id: -1,
      image: 'https://image.lutongjiakao.com/system/82895dd1bc8c4960b05f552446bf5c76.png',
      name: '此处显示商品标题，最多两行',
      remark: '此处显示描述，最多两行',
      price: '99',
      show_desc: true,
      show_price: true,
      isDefault: true
    })
  }
  handleUpdateComponent()
}

function handleCloseImageDialog(value: any) {
  if (value) {
    if (Array.isArray(value)) {
      showComponentData.value.default_sub_list.push(...value)
    } else {
      showComponentData.value.default_sub_list[changeIndex.value].image = value.fileUrl
    }
    handleUpdateComponent()
  }
  showImageChooseDialog.value = false
}

function handleDelImg(index: number) {
  showComponentData.value.default_sub_list[index].image = ''
  handleUpdateComponent()
}

function handleUpdateComponent() {
  emit('updateData', showComponentData.value)
}

function handleUpdateStyle(val: any) {
  showComponentData.value.style = val
  handleUpdateComponent()
}

onMounted(() => {
  if (showComponentData.value.itemStyle.title) {
    form.titleFontSize = showComponentData.value.itemStyle.title.fontSize
    form.titleColor = showComponentData.value.itemStyle.title.color
    form.titleFontWeight = showComponentData.value.itemStyle.title.fontWeight

    form.descColor = showComponentData.value.itemStyle.desc.color
  }
})
</script>

<style scoped lang="scss">
.style-page {
  padding: 20px;

  .head-page-title {
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    color: black;
  }

  .line {
    width: 100%;
    height: 1px;
    background: #f5f7fa;
  }

  .layout-section {
    padding: 20px;

    .tip-title {
      margin-bottom: 8px;
      font-weight: bold;
    }
  }

  .add-area {
    .add-title {
      font-size: 14px;
      color: black;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .content {
      .goods-item {
        display: flex;
        align-items: flex-start;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-bottom: 12px;
        position: relative;
        cursor: pointer;

        &:hover .del-icon {
          display: block;
        }

        .left {
          margin-right: 12px;

          .avatar-uploader {
            width: 120px;
            height: 80px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            text-align: center;

            .mask {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 24px;
              background-color: rgba(0, 0, 0, 0.6);
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity 0.3s ease;
              color: #fff;
              font-size: 12px;
            }

            .del-image {
              display: none;
              position: absolute;
              top: 0;
              right: 0;
              cursor: pointer;
              color: #8c939d;
            }

            &:hover .mask {
              opacity: 1;
            }

            &:hover .del-image {
              display: block;
            }

            .avatar {
              width: 100%;
              height: 80px;
              object-fit: cover;
            }

            .avatar-uploader-icon {
              font-size: 28px;
              color: #aaa;
            }
          }
        }

        .right {
          flex: 1;
          font-size: 14px;
          font-weight: bold;
          color: #606266;

          .text {
            margin-bottom: 6px;
          }

          .remark-text {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }

        .del-icon {
          display: none;
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
          color: #8c939d;
        }
      }
    }
  }

  .submit-btn {
    width: 100%;
    height: 40px !important;
    cursor: pointer;
    font-size: 14px;
  }

  .component-style {
    margin: 20px 0;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .title {
        font-size: 14px;
        font-weight: bold;
        color: black;
      }
    }

    .flex {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 3px;
    }
  }
}
</style>
